<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: "navList"
})
</script>

<template>
  <nav>
    <div class="logo-box">
      <img src="./../assets/images/logo.png" alt="">
      <span>小虎</span>海拍
    </div>
    <div>
      <ul>
        <li class="nav-title">
          <router-link to="/">
            <img src="./../assets/images/mt-list.png" alt="模特库">
            <span class="li-title-item">模特列表</span>
          </router-link>
        </li>
        <li class="nav-item-box" :class="{'nav-active': path === '/'}">
          <router-link to="/">
            <span>模特列表</span>
          </router-link>
        </li>
        <li class="nav-item-box" :class="{'nav-active': path === '/myModel'}">
          <router-link to="/myModel">
            <span>我的模特</span>
          </router-link>
        </li>
        <li class="nav-title">
          <router-link to="/order" :class="{'nav-active': path === '/order'}">
            <img v-show="path !== '/order'" src="./../assets/images/order.png" alt="订单">
            <img v-show="path === '/order'" src="./../assets/images/order-active.png" alt="订单">
            <span class="li-title-item">我的订单</span>
          </router-link>
        </li>
        <li class="nav-title">
          <router-link to="/wallet">
            <img src="./../assets/images/money.png" alt="财务">
            <span class="li-title-item">财务管理</span>
          </router-link>
        </li>
        <li class="nav-item-box" :class="{'nav-active': path === '/wallet'}">
          <router-link to="/wallet">
            <span>钱包管理</span>
          </router-link>
        </li>
        <li class="nav-item-box" :class="{'nav-active': path === '/invoice'}">
          <router-link to="/invoice">
            <span>发票管理</span>
          </router-link>
        </li>
        <!--<li class="nav-title">-->
        <!--  <router-link to="/user">-->
        <!--    <img src="./../assets/images/user.png" alt="">-->
        <!--    <span class="li-title-item">个人中心</span>-->
        <!--  </router-link>-->
        <!--</li>-->
        <!--<li class="nav-item-box" :class="{'nav-active': path === '/user'}">-->
        <!--  <router-link to="/user">-->
        <!--    <span>个人资料</span>-->
        <!--  </router-link>-->
        <!--</li>-->
        <!--<li class="nav-item-box" :class="{'nav-active': path === '/myVip'}">-->
        <!--  <router-link to="/myVip">-->
        <!--    <span>我的会员</span>-->
        <!--  </router-link>-->
        <!--</li>-->

      </ul>
    </div>

  </nav>
</template>
<script lang="ts" setup>
import {useRoute} from "vue-router";
import {ref,watch} from "vue";

const Route = useRoute();
const path = ref("/");
watch(
    () => Route.path,
    (newPath) => {
      path.value = newPath;
    }
);
</script>
<style scoped lang="scss">

nav {
  width: 180px;
  box-sizing: border-box;
}

.logo-box {
  display: flex;
  align-items: center;
  height: 60px;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;

  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  span {
    color: var(--main-color);
  }
}


ul, li {
  line-break: normal;
  list-style: none; /* 删除默认的列表样式 */
  margin: 0; /* 删除默认的外边距 */
  padding: 0; /* 删除默认的内边距 */

  li {
    height: 42px;
    font-size: 15px;
    padding-left: 20px;

    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }

    a {
      height: 42px;
      display: flex;
      align-items: center;
      color: #647484;
      font-family: OPPOSans, OPPOSans, serif;
    }

    .li-title-item {
      font-size: 16px;
    }
  }

  li.nav-item-box {
    font-size: 14px;
    padding: 0 10px 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      display: inline-block;
      padding-left: 10px;
      border-radius: 10px 0 0 10px;
      height: 42px;
      line-height: 42px;
      width: 94px;
    }


  }

  .nav-item-box.nav-active span {
    color: #09172F;
    background: linear-gradient(90deg, #d9dee8, #f1f4fb);
  }

  .nav-title a{
    padding-left: 8px;
  }

  li a.nav-active{
    color: #09172F;
    background: linear-gradient(90deg, #d9dee8, #f1f4fb);
    padding-left: 8px;
    border-radius: 10px 0 0 10px;
  }

  li.nav-item-box:before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;

    background-color: #9BA6BA;
  }

  li.nav-item-box.nav-active:before {
    background-color: #09172F;
  }

  li:hover {
    background-color: #eef4f8;
  }
}

</style>